<script setup>
import {ref, onMounted, computed} from 'vue'
import {useRouter, useRoute} from 'vue-router'
import {get} from '@/net/index.js'
import ToolCard from '@/components/ToolCard.vue'

const router = useRouter()
const route = useRoute()

const lifeTools = ref([])

const toolName = ref('')

const hideParentContent = computed(() => route.meta?.hideParentContent === true)

const goTo = (path) => {
    if (path) {
        router.push(`/index/LifeTool/${path}`)
    } else {
        console.warn('缺少跳转路径')
    }
}

const collect = (title) => {
    console.log(`收藏成功：${title}`)
}

// 加载页面标题
const loadToolName = () => {
    get('/api/toolKit/getToolList', (data) => {
        const currentPath = route.path
        const match = data.find(item => currentPath.includes(item.path))
        toolName.value = match ? match.toolName : '工具'
    })
}

// 加载工具列表
const loadLifeTools = () => {
    get('/api/lifeTool/getLifeToolList', (data) => {
        lifeTools.value = data
    })
}

onMounted(() => {
    loadLifeTools()
    loadToolName()
})

</script>

<template>
    <div style="padding: 1.25rem;">
        <template v-if="!hideParentContent">
            <h3
                    style="font-size: 2rem; margin-bottom: 1.5rem; font-weight: 600; color: var(--el-text-color-primary);"
            >
                {{ toolName }}
            </h3>

            <el-row justify="start" :gutter="20">
                <el-col
                        v-for="tool in lifeTools"
                        :key="tool.id"
                        :xs="24"
                        :sm="12"
                        :md="8"
                        :lg="6"
                        :xl="4"
                        class="tool-col"
                        style="width: 100%;"
                >
                    <ToolCard
                            :id="tool.id"
                            :title="tool.title"
                            :introduction="tool.introduction"
                            @click="goTo(tool.path)"
                            @collect="collect"
                    />
                </el-col>
            </el-row>
        </template>

        <template v-else>
            <router-view style="width: 100%;"/>
        </template>
    </div>
</template>

<style scoped>
.tool-col {
    margin-bottom: 1rem;
}
</style>